import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { View, Image, ScrollView } from '@tarojs/components';
import utils from '@/utils/index';
import { debounce } from '@/utils/helper';
import { sourceUrl } from '@/config';
import Imagelocation from '@/components/Imagelocation';
import pCheaper from '@/images/taihuHomePage/cheaper.png';
import pZhekou from '@/images/common/zhekou.png';

import './index.scss';

const CheaperPage = ({ dispatch, cheaperAllList = [], cheaperAllFinished = false }) => {
  const showNextPageNews = debounce(() => {
    !cheaperAllFinished && getCheaperProductList();
  }, 1200);

  useEffect(() => {
    if (cheaperAllList.length === 0) {
      getCheaperProductList();
    }
  }, []);

  const getCheaperProductList = () => {
    dispatch({
      type: 'productList/getCheaperAllList',
      payload: { pageSize: 15 },
    });
  };

  return (
    <View className="totalPage_cheaper">
      <ScrollView
        className="contentPage"
        scrollY
        lowerThreshold={240}
        onScrollToLower={showNextPageNews}
      >
        <View className="cheaperArea">
          <View className="headerLine">
            <Image className="title" src={pCheaper} />
          </View>
          <View className="productList">
            {cheaperAllList.length > 0 &&
              cheaperAllList.slice(0, 4).map((product, index) => (
                <View
                  className="product"
                  onClick={() => utils.goGoodDetail(product, dispatch)}
                  key={'cheaperProduct_' + index}
                >
                  <View className="upImg">
                    <Imagelocation
                      className="picture"
                      src={
                        product.url.indexOf('http') === 0 ? product.url : sourceUrl + product.url
                      }
                    />
                    {product.activityType === 3 && (
                      <Image className="activeIcon zhekou" src={pZhekou} />
                    )}
                  </View>
                  <View className="priceLineCurrent">¥{product.price}</View>
                  <View className="priceLineOrigin">¥{product.maxPrice}</View>
                </View>
              ))}
          </View>
        </View>

        <View className="productListCnt">
          {cheaperAllList.length > 4 &&
            cheaperAllList.slice(4).map((product, index) => (
              <View
                className="product"
                onClick={() => utils.goGoodDetail(product, dispatch)}
                key={'cheaperProduct_' + index}
              >
                <View className="upImg">
                  <Imagelocation
                    className="picture"
                    src={product.url.indexOf('http') === 0 ? product.url : sourceUrl + product.url}
                  />
                  {product.activityType === 3 && (
                    <Image className="activeIcon zhekou" src={pZhekou} />
                  )}
                </View>
                <View className="name">{product.title}</View>
                <View className="priceLine">¥{product.price}</View>
                <View className="bottom">已售卖{product.saleNum ? product.saleNum : 0}件</View>
              </View>
            ))}
        </View>

        {cheaperAllFinished && cheaperAllList.length > 8 && (
          <View className="end">- 我是有底线的 -</View>
        )}
      </ScrollView>
    </View>
  );
};

export default connect(({ productList }) => ({
  cheaperAllList: productList.cheaperAllList,
  cheaperAllFinished: productList.cheaperAllFinished,
}))(CheaperPage);
